<template>
	<view>
		<view class="top">
			<image class="tiaozhuan" src="../../../static/images/ljh/jt.png" @click="returnButton()"></image>
			<view class="title">
				就近加油
			</view>

			<view class="sslan">
				<uni-search-bar bgColor="#fff" class="uni-mt-10" radius="100" v-model="searchForm.name"
					@confirm="getByName" placeholder="中国石油加油站" clearButton="none" cancelButton="none">
				</uni-search-bar>
				<view class="qhan" @click="qhms()">
					地图模式
				</view>
			</view>

		</view>
		<view class="jyzList">
			<view v-for="(item, index) in nowList" :key="index" class="jyzItem">
				<uni-card :title="item.title" :extra="item.extra" :thumbnail="item.topImg" @click="onClick(item)"
					style="margin-top: 10rpx; ">
					<view style="display: flex;">
						<view class="dd">
							<view class="ddimg1">
								{{ item.status1 }}
							</view>
							<view class="ddimg2">
								{{ item.status2 }}
							</view>
							<view class="ddimg3">
								{{ item.status3 }}
							</view>
						</view>
						<view>
							<image :src="item.avatar" style="width: 300rpx; height: 200rpx; margin-left: 200rpx;">
							</image>
						</view>
					</view>
				</uni-card>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		equal
	} from 'assert';
	export default {
		data() {
			return {
				//	经纬度，初始
				latitude: 34.826128,
				longitude: 113.558902,

				img: '',
				jyzListItems: [
					// {
					// 	title: '中国石油加油站',
					// 	extra: '556m',
					// 	avatar: 'path/to/avatar1.jpg',
					// 	status1: '待支付',
					// 	status2: '待支付',
					// 	status3: '待支付'
					// },
					// {
					// 	title: '中国石油加油站',
					// 	extra: '1.2km',
					// 	avatar: 'path/to/avatar2.jpg',
					// 	status1: '已支付',
					// 	status2: '处理中',
					// 	status3: '待发货'
					// }
				],
				nowList:[],

				searchForm: {
					name: ''
				}

			}
		},
		onLoad() {
			this.getList();
			// this.getAround();
		},
		methods: {
			getByName() {
				
				// 假设 searchTerm 是从 v-model 绑定的 searchForm.name 中获取的
				// 你可以通过方法参数直接接收，或者从组件的数据属性中获取
				const searchTermLowerCase = this.searchForm.name; // 将搜索词转换为小写以进行不区分大小写的比较
				const filteredItems = this.jyzListItems.filter(item => {
					return item.title.includes(searchTermLowerCase); // 检查标题是否包含搜索词（不区分大小写）
				});

				// 根据你的需求，你可以在这里处理 filteredItems，比如更新一个显示搜索结果的数组
				this.nowList = filteredItems; // 假设你有一个用于显示搜索结果的数组

				// 你也可以直接在控制台打印结果，用于调试
				console.log(filteredItems);

				// 根据你的应用逻辑，你可能还需要执行其他操作，比如更新视图或导航到另一个页面
			},

			getAround() {
				let that = this;
				let id = uni.getStorageSync("user_id");
				this.$http({
					url: '/api/petrol/petrol/listAround?longitude=' + that.longitude + '&latitude=' + that
						.latitude + '&dt=10' + '&id=' + id,
					method: 'GET',
					success(res) {
						// console.log(res.data.rows);
						res.data.rows.forEach(item => {
							let id = Object.keys(item)[0]; // 获取键（ID）
							let distance = Object.values(item)[0]; // 获取值
							// console.log(id);
							// console.log(distance);

							that.$http({
								url: '/api/petrol/petrol/' + id,
								method: 'GET',
								success(res) {
									// console.log(res);


									let station = {
										id: res.data.data.id,
										title: res.data.data.name,
										extra: parseFloat(distance).toFixed(1) + 'm',
										avatar: '',
										topImg: '../../../static/images/ys/carFix/zuobiao.png',
										status1: '已支付',
										status2: '处理中',
										status3: '待发货'
									}
									//	获取图片
									that.$http({
										url: '/api/petrol/petrolImage/' + id,
										method: 'GET',
										success(resp) {
											// console.log(resp);
											station.avatar = resp.data.msg;
											console.log(station.avatar + 'wwww');
										}
									});
									that.jyzListItems.push(station);
									// console.log(that.jyzListItems);
								}
							})

						})
						that.nowList = that.jyzListItems
					}
				})



			},



			getList() {
				let that = this;
				let id = uni.getStorageSync("user_id");
				if (this.searchForm.name) {
					name = this.searchForm.name;
				}
				this.$http({
					url: '/api/petrol/petrol/listGeo/' + id,
					method: 'GET',
					success(res) {
						console.log(res);

					}

				})
				console.log(that.jyzListItems);
				this.getAround();
			},



			qhms() {
				uni.$u.route('/pages/ljh/refuelNearby2/refuelNearby2')
			},
			returnButton() {
				// uni.$u.route('/pages/index/index')
				uni.$u.route({
					url: '/pages/index/index',
					type: 'tab'
				})
			},
			onClick(item) {
				uni.$u.route('/pages/ljh/GasStationDetails/GasStationDetails?id=' + item.id)
			}
		}
	}
</script>

<style>
	.tiaozhuan {
		position: absolute;
		color: white;
		font-size: 50rpx;
		top: 50rpx;
		left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.sslan {
		display: flex;
	}

	.qhan {
		text-align: center;
		line-height: 100rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		font-size: 12rpx;
		color: white;
		background-color: blueviolet;
		box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	}

	.jyzList {
		/* background-color: yellow; */
		position: absolute;
		top: 360rpx;
		width: 100%;
	}

	.qyItem {
		margin-top: 20rpx;
		margin-left: 20rpx;
		width: 90rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border: 1rpx solid #ffffff;
		/* 白色边框 */
		border-radius: 10rpx;
		/* 圆弧矩形的圆角半径 */
		color: white;
		font-size: 26rpx;

	}

	.qyList {
		display: flex;
		width: 100%;

	}

	.uni-mt-10 {
		margin-top: 0rpx;
		margin-left: 10rpx;
		width: 75%;
	}

	.top {
		width: 100%;
		height: 450rpx;
		background-image: url(@/static/images/ljh/tc1.png);
	}

	.title {
		width: 100%;
		color: white;
		text-align: center;
		padding: 50rpx 0rpx;
		font-size: 35rpx;
	}
</style>